<template>
  <div id="da">
    <van-nav-bar
      title="订单明细"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <span class="span">订单编号：{{ orderList.orderId }}</span>
      <span class="span">到达时间：{{ orderList.endTime }}</span>
      <span class="span">出发点：{{ orderList.startingPoint }}</span>
      <s-pan class="span">目的地：{{ orderList.terminal }}</s-pan>
    </div>
    <div id="touk">
      <div id="pic">
        <img src="../../assets/1111.jpeg" height="1080" width="1080"/>
      </div>
      <div id="name">
        <h3>{{ orderList.riderName }}</h3>
      </div>
      <div id="money">
        <h1>￥{{ orderList.endMoney }}</h1>
      </div>
    </div>
    <div id="fan">
      <label>
        <input type="checkbox" v-model="feedbackType" value="拿走车主物品">
        拿走车主物品
      </label>
      <label>
        <input type="checkbox" v-model="feedbackType" value="污损车辆">
        污损车辆
      </label>
      <label>
        <input type="checkbox" v-model="feedbackType" value="酒后滋事">
        酒后滋事
      </label>
      <label>
        <input type="checkbox" v-model="feedbackType" value="不尊重车主，言语伤人">
        不尊重车主，言语伤人
      </label>
      <label>
        <input type="checkbox" v-model="feedbackType" value="中途变更路线或目的地">
        中途变更路线或目的地
      </label>
      <label>
        <input type="checkbox" v-model="feedbackType" value="携带大行李未提前沟通">
        携带大行李未提前沟通
      </label>
      <label>
        <input type="checkbox" v-model="feedbackType" value="要求车主违章行驶">
        要求车主违章行驶
      </label>
      <label>
        <input type="checkbox" v-model="feedbackType" value="其他">
        其他
      </label>
      <textarea v-model="feedbackDetails" placeholder="请在此补充说明，以便客服帮您解决问题，谢谢！"></textarea>
      <button @click="submitFeedback">提交反馈</button>
      <button @click="black">取消</button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "feedback",
  data() {
    return {
      orderId: '',
      orderList: [],
      feedbackType: [],
      feedbackDetails: []
    }
  },
  created() {
    this.orderId = this.$route.params.orderId
    this.findOne()
  },
  methods: {
    black(){
      this.feedbackType=[];
      this.feedbackDetails=[]
    },
    submitFeedback() {
      this.orderList.drivervaluation=this.feedbackType.join(",")+","+this.feedbackDetails;
      console.log(this.orderList)
      axios.post(`personal/queue/update?id=${this.orderList.id}&&drivervaluation=${this.orderList.drivervaluation}`,).then(res => {
        console.log(res)
        console.log('aaaaa')
        if (res.data.data==="成功"){
          alert("反馈成功")
        }
        this.feedbackType=[];
        this.feedbackDetails=[]
      })
    },
    onClickLeft() {
      this.$router.push('/dcOrders')
    },
    findOne() {
      axios.get(`personal/queue/findOne?orderId=${this.orderId}`).then(res => {
        this.orderList = res.data
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>
label {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
#fan {
  padding-left: 20px;
  textarea{
    width: 90%;
    border-radius: 10px;
    height: 100px;
  }
  button{
    position: relative;
    width: 80%;
    margin-top: 15px;
    height: 40px;
    background-color: #4195c1;
    border-radius: 20px;
    border-color: #4195c1;
    color: #FFFFFF;
    left: 10%;
  }
}
#touk {
  margin: 10px;
  width: 100%;
  height: 150px;
  #pic {
    float: left;
    width: 100px;
    height: 100px;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50px;
    }
  }
  #name {
    float: left;
    width: 50%;
    height: 100px;
    margin-left: 20px;
  }
  #money {
    float: left;
    text-align: center;
    width: 100%;
    height: 60px;
    h1 {
      font-size: 30px;
      color: #FF0000;
    }
  }
}
.span {
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: left;
  margin: 10px;
}
#da {
  width: 100%;
  height: 100%;
  background-color: #F3FCFF;
}
</style>
